import {
  DollarCircleOutlined,
  EyeOutlined,
  ShoppingOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Col, Row, Statistic } from 'antd';
import { useState } from 'react';

const Dashboard: React.FC = () => {
  const [loading] = useState(false);

  // 简化的模拟数据
  const stats = {
    totalUsers: 12847,
    todayVisits: 3521,
    totalOrders: 8923,
    revenue: 156789,
  };

  return (
    <PageContainer>
      <Row gutter={[24, 24]}>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable loading={loading}>
            <Statistic
              title="总用户数"
              value={stats.totalUsers}
              prefix={<UserOutlined style={{ color: '#1890ff' }} />}
              valueStyle={{ color: '#1890ff', fontSize: '28px' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable loading={loading}>
            <Statistic
              title="今日访问"
              value={stats.todayVisits}
              prefix={<EyeOutlined style={{ color: '#52c41a' }} />}
              valueStyle={{ color: '#52c41a', fontSize: '28px' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable loading={loading}>
            <Statistic
              title="订单总数"
              value={stats.totalOrders}
              prefix={<ShoppingOutlined style={{ color: '#722ed1' }} />}
              valueStyle={{ color: '#722ed1', fontSize: '28px' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card hoverable loading={loading}>
            <Statistic
              title="总收入 (¥)"
              value={stats.revenue}
              prefix={<DollarCircleOutlined style={{ color: '#eb2f96' }} />}
              valueStyle={{ color: '#eb2f96', fontSize: '28px' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: 24 }}>
        <Col span={24}>
          <Card
            title="欢迎使用管理系统"
            bordered={false}
            style={{
              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              color: 'white',
              textAlign: 'center',
              padding: '40px',
            }}
          >
            <h1
              style={{ color: 'white', fontSize: '32px', marginBottom: '16px' }}
            >
              🎉 欢迎使用管理后台
            </h1>
            <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: '16px' }}>
              基于 Ant Design Pro
              构建的现代化管理系统框架，提供完善的功能模块和优雅的用户界面。
            </p>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Dashboard;
